<template>
    <div class="leftbarall">
      <div class="leftbar">
      <div v-for="(item,index) in leftdata" :key="index" @click="btnclick(index,item)" :class="{active:currtindex==index}" class='baritem'>{{item.title}}</div>
      </div>
      <div class="infoall">
         <div class="infoitem" v-for="(item1,index) in maitkeyitem" :key="index+item1">
            <img :src="item1.image"/>
            <div>{{item1.title}}</div>
         </div>      
      </div>        
    </div>
</template>

<script>

import  {subcategory} from 'network/category'
export default {
  name:'leftnavbar',
  data () {
    return {
      currtindex:0,
      maitkeyitem:[],
      firstkey:'3627'
    }
  },
  props: {
    leftdata:{
      type:Array,
      default(){
        return []
      }
    }
  },
  created () {
      subcategory(this.firstkey).then(res=>{
      this.maitkeyitem=res.data.list
    })
  },
  methods: {
    btnclick(index,item){
      this.currtindex=index
      // console.log( this.maitkeymaitkeyitem)
      subcategory(item.maitKey).then(res=>{
      this.maitkeyitem=res.data.list
    })
    }
  }
}
</script>

<style scoped>
.leftbarall{
  height: 100vh;
}
.leftbar{
  width: 28vw;
  position: fixed;
  top: 44px;
  left: 0;
}
.baritem{
  
  font-size: 18px;
  color: #fff;
  text-align: center;
  height: 5.57vh;
  line-height: 5.57vh;
  background-color:rgb(192, 192,192);;
}
.active{
  
  background-color: var(--color-text);
}
.infoall{
  width: 72vw;
  position: relative;
  left: 28vw;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 44px;

}
.infoall img{
  width: 80px;
  height: 80px;
}

</style>